<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加活动</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <link rel="stylesheet" href="../lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">

    <style>
        body {
            background-color: #ffffff;
        }

        #find {
            background-color: #4D67F8;
        }
    </style>
</head>

<body>
    <div class="layui-form layuimini-form">
        <blockquote class="layui-elem-quote layui-text">
            可以在这里添加活动哦~
        </blockquote>
        <div class="layui-form-item">
            <label class="layui-form-label required">活动名称</label>
            <div class="layui-input-block">
                <input type="text" name="actname" lay-verify="required" lay-reqtext="活动名称不能为空" placeholder="请输入活动名称"
                    value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">开始日期</label>
            <div class="layui-input-inline">
                <input type="date" name="actstart" lay-verify="required" lay-reqtext="开始时间不能为空" placeholder="请输入开始时间"
                    value="" class="layui-input">
            </div>
            <label class="layui-form-label required">结束日期</label>
            <div class="layui-input-inline">
                <input type="date" name="actend" lay-verify="required" lay-reqtext="结束日期不能为空" placeholder="请输入结束日期"
                    value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">结束时间</label>
            <div class="layui-input-inline">
                <input type="time" name="actendtime" lay-verify="required" lay-reqtext="结束时间不能为空" placeholder="请输入结束时间"
                    value="" class="layui-input">
            </div>
            <label class="layui-form-label required">活动类型</label>
            <div class="layui-input-inline">
                <select name="actype">
                    <option value="">请选择类型</option>
                    <option value="德育">德育</option>
                    <option value="智育">智育</option>
                    <option value="体育">体育</option>
                    <option value="美育">美育</option>
                    <option value="劳育">劳育</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">活动引言</label>
            <div class="layui-input-block">
                <textarea name="actintro" lay-verify="required" placeholder="请输入活动引言" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">活动要求</label>
            <div class="layui-input-block">
                <textarea name="actrequire" lay-verify="required" placeholder="请输入活动要求"
                    class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">量化奖励</label>
            <div class="layui-input-block">
                <textarea name="actbonus" lay-verify="required" placeholder="请输入量化奖励" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">活动头图</label>
            <button type="button" class="layui-btn layui-btn-warm material" id="upimg"
                style="display: inline-block;vertical-align: middle;">+上传图片
            </button>
            <input class="layui-upload-file" type="file" accept="" name="file">
            <div class="layui-upload-list"
                style="display: inline-block;vertical-align: middle;margin:15px 15px 40px 132px;width: 400px;height: 200px;border-radius: 0px;border:1px dashed #1E9FFF">
                <img src="https://s2.loli.net/2022/05/09/Ll6HgRqM89FaVY5.png" id="demo1"
                    style="width: 400px;height: 200px;border:none;border-radius: 0px;">
                <p id="demoText"></p>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">活动策划</label>
            <input type=file accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                style="display:none" value="" id="upfile2" name="upfile2" onchange="fileChange()">
            <button type="button" onclick="upfile2.click()" class="layui-btn layui-btn-warm material">+上传文件</button>


            <input class="layui-upload-file" type="file" accept="" name="file">
            <div id="demofile" class="layui-upload-list"
                style="display: inline-block;vertical-align: middle;margin:15px 15px 40px 132px;width: 400px;height: 90px;border-radius: 0px;border:1px dashed #1E9FFF">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"> </label>
            <label class="layui-form-label"> </label>
            <label class="layui-form-label"> </label>
            <div class="layui-input-inline">
                <button id="find" class="layui-btn layui-btn-normal" style="vertical-align: middle;"
                    lay-filter="saveBtn" lay-submit="">确定</button>
            </div>

        </div>

    </div>


    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script>
        var myfile = document.getElementById('upfile2');

        function submit() {
            //下载的代码
            var base64 = localStorage.getItem('base642');
            blob2 = dataURLtoBlob(base64);
            console.log(blob2);
            const blobUrl = window.URL.createObjectURL(blob2);
            const a = document.createElement('a');
            a.href = blobUrl;
            a.download = myfile.files[0].name + filevalue.substring(index);
            a.click();
        }

        function blobToDataURL(blob, callback) {
            let a = new FileReader();
            a.onload = function (e) {
                callback(e.target.result);
            }
            a.readAsDataURL(blob);
        }

        function dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {
                type: mime
            });
        }

        function fileChange(e) {
            let evt = e || window.event;
            let file = evt.target.files[0];
            let reader = new FileReader();
            let reader2 = new FileReader();
            let rs = reader.readAsArrayBuffer(file);
            let blob = null;
            let blob2 = null;
            reader.onload = (e) => {
                if (typeof e.target.result === 'object') {
                    blob = new Blob([e.target.result])
                } else {
                    blob = e.target.result
                }
                console.log(blob);
                let byte = null;
                localStorage.setItem('myfile.files[0].name', myfile.files[0].name);
                blobToDataURL(blob, function (base64) {
                    localStorage.setItem('base642', base64);
                })
            }
            //btnsuccess ='<img src="https://s2.loli.net/2022/05/09/316YyQ5xSeFtfTK.png" class="layui-upload-img" style="width: 400px;height: 200px;border-radius: 0px;">'
            // <span style="color:#FF0000;">filevalue.substring(index)</span>

            btnsuccess =
                '<br>&nbsp;&nbsp;<img src="https://s2.loli.net/2022/05/09/zvlPosaT14pXh6t.jpg" class="layui-upload-img" style="width: 50px;border-radius: 0px;">&nbsp;' +
                '<span style="color:black; font-size: 15px;text-align:center">' + myfile.files[0].name +
                '</span>&nbsp;&nbsp;<button type="button" onclick="submit()" id="submit" style="color:blue;background-color:white;border:none;" >下载提交</button></div>'
            document.getElementById('demofile').innerHTML = btnsuccess;
        }
        layui.use(['form', 'jquery', 'upload'], function () {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer,
                upload = layui.upload;
            var remember = 0; //是否记住密码
            var password = '';
            var username = '';
            var strCookie = document.cookie;
            if (strCookie != '') {
                var arrCookie = strCookie.split("; ");
                for (i = 0; i < arrCookie.length; i++) {
                    var arr = arrCookie[i].split("=");
                    if (arr[0] == 'username')
                        username = arr[1];
                    else if (arr[0] == 'remember')
                        remember = 1;
                    else if (arr[0] == 'password')
                        password = arr[1];
                }
            }
            // var url = '';
            // $('body').ready(function () {
            //     var data = {
            //         username: username,
            //         mode: '3'
            //     }
            //     $.post('/addActivity', data, function (re) {
            //         if (re.img != '') {
            //             $('#demo1').attr('src', re.img);
            //         }

            //         $('#truename').val(re.truename);
            //         $('#phone').val(re.phone);
            //     })
            // })
            var url = ''
            var uploadInst = upload.render({
                elem: '#upimg',
                url: '/api/upload/', //改成您自己的上传接口
                data: {
                    'username': username,
                    'url': url,
                    'mode': '1'
                },
                size: 10000,
                accept: 'images',
                acceptMime: 'image/*',
                auto: false, // 取消自动提交
                bindAction: "#upimg", //确认上传按钮
                field: "actimg", //上传的图片part名称
                choose: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                        url = result;
                        //result存storage
                        //localStorage.setItem('headpic' + i, url);
                        // console.log(result);
                    });
                }
            });

            //监听提交
            form.on('submit(saveBtn)', function (data) {
                data1 = data.field;
                data1.actimg = url;
                data1.actfile = "";
                data1.username = username;
                if (url == '')
                    layer.msg('请上传头图！');
                else {
                    //data1.actintro = data1.actintro.split(/[(\r\n)\r\n]+/);
                    var intro = data1.actintro.split(/[(\r\n)\r\n]+/);
                    var intro2 = [];
                    // for 循环的写法
                    for (var ii = 0; ii < intro.length; ii++) {
                        c = "&nbsp;&nbsp;" + intro[ii];
                        intro2.push(c);
                    }
                    intro3 = intro2.join("<br>");
                    var actrequire = data1.actrequire.split(/[(\r\n)\r\n]+/);
                    var join1 = actrequire.join("<br>");
                    var actbonus = data1.actbonus.split(/[(\r\n)\r\n]+/);
                    var join2 = actbonus.join("<br>");
                    console.log(intro3);
                    console.log(join1);
                    console.log(join2);
                    data1.actintro = intro3;
                    data1.actrequire = join1;
                    data1.actbonus = join2;
                    $.get('/addActivity', data1, function (re) {
                        if (re == '1') {
                            layer.msg('提交成功！');
                        } else {
                            layer.msg('提交失败！');
                        }

                    });
                }
                return false;

            });
        });
    </script>



    <!-- <button id="test1" class="layui-btn test" lay-data="{url: '/b/', accept: 'file'}">上传文件</button>
    <script src="../lib/layui-v2.6.3/layui.js"></script>
    <script>
        layui.use('upload', function () {
            var upload = layui.upload;

            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                    ,
                url: '/api/upload/' //上传接口
                    ,
                done: function (res, index, upload) {
                    //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
                    var item = this.item;
                },
                error: function () {
                    //请求异常回调
                }
            });
        });
    </script> -->
</body>

</html>